<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Amber - Pet Care Bootstrap 5 Template</title>

    <!-- Favicons -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <!-- Vendor CSS (Icon Font) -->

    <link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
    <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">

</head>

<body style="background-color: #f6ab49;">
    <div id="app">
        <!-- Login Section Start -->
        <div class="section section-margin" style="margin-top: 300px;">
            <div class="container">
                <div class="row">
                    <div class="col-lg-7 col-md-8 m-auto">
                        <div class="login-wrapper">

                            <!-- Login Title & Content Start -->
                            <div class="section-content text-center m-b-30">
                                <h2 class="title m-b-10">宠物商品商店</h2>
                            </div>
                            <!-- Login Title & Content End -->

                            <!-- Form Action Start -->
                            <form action="*" onsubmit="return false" enctype="multipart/form-data">

                                <!-- Input Email Start -->
                                <div class="single-input-item m-b-10">
                                    <input type="text" v-model="account" placeholder="用户名">
                                </div>
                                <!-- Input Email End -->

                                <!-- Input Password Start -->
                                <div class="single-input-item m-b-10">
                                    <input type="password" v-model="passwd" placeholder="密码">
                                </div>
                                <!-- Input Password End -->

                                <!-- Button/Forget Password Start -->
                                <div class="single-input-item">
                                    <div class="login-reg-form-meta">

                                        <button class="btn btn btn-gray-deep m-b-15" style="margin: 0 auto;" @click="login">登录</button>
                                        <!-- <a href="#" class="forget-pwd m-b-15">Forget Password?</a> -->

                                    </div>
                                </div>
                                <!-- Button/Forget Password End -->

                                <!-- Lost Password & Creat New Account Start -->
                                <!-- <div class="lost-password">
                                    <a href="register.html">Creat Account</a>
                                </div> -->
                                <!-- Lost Password & Creat New Account End -->

                            </form>
                            <!-- Form Action End -->

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Login Section End -->
    </div>


    <script src="assets/js/vendor.min.js"></script>
    <script src="assets/js/plugins.min.js"></script>

    <!--Main JS-->
    <script src="assets/js/main.js"></script>
    <script src="/admin/assets/js/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    selectList:[],
                    page:1,
                    size:10,
                    account:'',
                    passwd:'',
                }
            },
            mounted() {
                sessionStorage.removeItem('userInfo');//移除sessionStorage
            },
            methods: {
                login(){
                    const that = this
                    $.ajax({
                        //几个参数需要注意一下
                        type: "POST", //方法类型
                        dataType: "json", //预期服务器返回的数据类型
                        url: "/userInfo/login",
                        contentType: 'application/json',
                        data: JSON.stringify({
                            "account": that.account,
                            "passwd": that.passwd
                        }),
                        success: function (data) {
                            sessionStorage.removeItem('userInfo');//移除sessionStorage
                            sessionStorage.setItem('userInfo',JSON.stringify(data));//设置数据保存sessionStorage对象中
                            if(data.role===0){
                                window.location.href = '/admin/user.html';
                            }else if(data.role===1){
                                window.location.href = '/admin/stock.html';
                            }else if(data.role===2){
                                window.location.href = '/admin/user.html';
                            }else{
                                window.location.href = '/user/index.html';
                            }
                        },
                        error: function (error) {
                            alert(error.responseText);
                        }
                    });
                }
            }
        })
    </script>
</body>

</html>
